<template>
  <div>
     <el-button size="small" @click="addTab()" >{{addtitle}}</el-button>
     <el-tabs v-model="activeTab" type="card" @tab-click="tabclick" @tab-remove="removeTab">
        <el-tab-pane v-for="item in dataSource" :key="item.name" :label="item.title" :name="item.name"
        :closable="item.isCloseable">
          <component v-bind:is="item.content" :addMethodForm="item.addMethodForm" :MethodPlug="item.Method_Plug"></component>
        </el-tab-pane>
     </el-tabs>
  </div>
</template>
<script>
import TabOne from '@/components/Tabs/TabOne'
import TabTwo from '@/components/Tabs/TabTwo'
export default {
  name: 'tabs-form',
  props: {
    // 数据源
    dataSource: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 当前在第几页
    editableTabsValue2: {
      type: String,
      default: '1'
    },
    // 当前总共有几个tab页
    tabIndex: {
      type: Number,
      default: 1
    },
    addtitle: {
      type: String,
      default: ''
    }
  },
  components: {
    TabOne,
    TabTwo
  },
  computed: {
    activeTab: {
      get: function () {
        return this.editableTabsValue2
      },
      set: function () {
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    addTab () {
      this.$emit('addTab')
    },
    tabclick (tab) {
      this.$emit('tabclick', tab.name)
    },
    removeTab (targetName) {
      this.$emit('removeTab', targetName)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
